import {
  PageContainer,
  ProCardTabsProps,
  ProFormInstance,
  ProFormMoney,
} from '@ant-design/pro-components';
import {
  ModalForm,
  ProCard,
  ProFormDependency,
  ProFormDigit,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
  ProForm,
} from '@ant-design/pro-components';
import { Card, InputNumber, Select, Space } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import type { FormDialogProps } from './data';
import type { FormLayout } from 'antd/es/form/Form';
import access from '@/access';
import { useAccess, useLocation } from 'umi';
import { SettingFilled } from '@ant-design/icons';
const { Option } = Select;

const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
const Encodermodal: React.FC<FormDialogProps> = (props, uploadRef) => {
  const [visible, setVisible] = useState(false);
  const formRef = useRef<ProFormInstance>();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [initialValues, setInitialValues] = useState({});
  const [controlMode, setControlMode] = useState(0);

  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [grid, setGrid] = useState(true);
  const access = useAccess();
  const [tab, setTab] = useState('');
  const [tabPosition, setTabPosition] = useState<ProCardTabsProps['tabPosition']>('top');
  const location = useLocation();
  const [vmaxEposLu, setVmaxEposLu] = useState(0);

  useEffect(() => {
    setVisible(props.visible);
    setInitialValues(props.initialValues || {});
  }, [props.visible, props.initialValues]);

  useEffect(() => {
    if (location.query.id !== undefined && location.query.id !== null) {
      formRef.current?.setFieldsValue(props.values);
    }
  }, [props.values]);

  useImperativeHandle(uploadRef, () => {
    // return返回的值就可以被父组件获取到,没返回的值就获取不到
    return {
      // 获取其中的值
      getFieldsValue: () => {
        return formRef.current?.getFieldsValue();
      },
      // 设置值
      setFieldsValue: (value: object) => {
        // console.log(formRef.current);
        // debugger;
        return formRef.current?.setFieldsValue({ shaftName: '测试', hardwareIdentifier: 'hhh' });
      },
      // 重置其中的值
      resetFields: () => {
        return formRef.current?.resetFields();
      },
    };
  });

  return (
    <div>
      <ModalForm
        title={props.title}
        visible={visible}
        formRef={formRef}
        initialValues={initialValues}
        onFinish={async () => {
          setConfirmLoading(true);
          await props.onOk();
          setConfirmLoading(false);
          return true;
        }}
        onValuesChange={(changeValues) => { }}
        modalProps={{
          destroyOnClose: true,
          bodyStyle: { height: 500, overflowY: 'scroll' },
          onCancel: () => props.onCancel(),
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
      >
        <ProFormGroup
          key="lib1"
          title="基础信息配置"
          titleStyle={{ backgroundColor: '#f0f0f0' }}
          collapsible
        >
          <ProFormText hidden={true} name="id" label="轴信息Id" />
          <ProFormText
            width="md"
            name="encoderManufacturer"
            label="编码器厂家"
            colProps={{ md: 12, xl: 8 }}
            rules={[{ required: true, message: '请输入编码器厂家' }]}
          />
          <ProFormSelect
            width="md"
            name="encoderType"
            label="编码器类型"
            options={[
              { label: '1024HTL A/B R', value: '3001' },
              { label: '1024HTL A/B', value: '3005' },
              { label: 'User-defined', value: '9999' },
            ]}
            colProps={{ md: 12, xl: 8 }}
            rules={[{ required: true, message: '此项是必填项目' }]}
          />
          <ProFormText
            width="md"
            name="encoderNum"
            label="编码器型号"
            colProps={{ md: 12, xl: 8 }}
            rules={[{ required: true, message: '请输入编码器型号' }]}
          />
          <ProFormSelect
            width="md"
            name="isLinearEncoder"
            label="线性编码器 P404[1].00"
            options={[
              { label: 'Rotary', value: 0 },
              { label: 'Linear', value: 1 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="isAbsEncoder"
            label="绝对值编码器 P404[1].01"
            options={[
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="isMultiAbsEncoder"
            label="多圈绝对值编码器 P404[1].02"
            options={[
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="isSsiEncoder"
            label="SSI编码器 P404[1].09"
            options={[
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="voltageLevel"
            label="电压级24V P404[1].20/P404[1].21"
            options={[
              { label: '5V', value: 0 },
              { label: '13.5-30V', value: 1 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="remoteSense"
            label="遥感仅对SMC30 P404[1].22"
            options={[
              { label: 'Unselect', value: 0 },
              { label: 'Select', value: 1 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="signal"
            label="信号 P405[0].00"
            options={[
              { label: 'Unipolar', value: 0 },
              { label: 'Bipolar', value: 1 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormSelect
            width="md"
            name="level"
            label="电平 P405[0].01"
            options={[
              { label: 'HTL', value: 0 },
              { label: 'TTL', value: 1 },
            ]}
            colProps={{ md: 16, xl: 12 }}
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 16, xl: 12 }}
            key="gxXist1"
            name="gxXist1"
            label="编码器精Gx_XIST1 P418[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 16, xl: 12 }}
            key="gxXist2"
            name="gxXist2"
            label="编码器精Gx_XIST2 P419[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 16, xl: 12 }}
            key="singleCircleRes"
            name="singleCircleRes"
            label="绝对值编码器单圈 P423[1]/P408[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 16, xl: 12 }}
            key="multiCircleRes"
            name="multiCircleRes"
            label="绝对值编码器多圈 P421[1]"
          />
        </ProFormGroup>

        <ProFormGroup
          key="lib2"
          title="SSI编码器设置"
          titleStyle={{ backgroundColor: '#f0f0f0' }}
          collapsible
        >
          <ProFormSelect
            width="md"
            name="transCode"
            label="传输代码 P429[1].00"
            options={[
              { label: '格雷码', value: 0 },
              { label: '二进制代码', value: 1 },
            ]}
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="resolution"
            name="resolution"
            label="分辨率 P407[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="ssiAbs"
            name="ssiAbs"
            label="编码器绝对值位 P447[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="ssiBefore"
            name="ssiBefore"
            label="编码器之前的位 P446[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="ssiAfter"
            name="ssiAfter"
            label="编码器之后的位 P448[1]"
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="baudRate"
            name="baudRate"
            label="波特率 P427[1]"
          />
        </ProFormGroup>

        <ProFormGroup
          key="lib3"
          title="SSI故障位设置"
          titleStyle={{ backgroundColor: '#f0f0f0' }}
          collapsible
        >
          <ProFormSelect
            width="md"
            name="faultBitActive"
            label="故障位激活"
            options={[
              { label: 'OFF', value: 0 },
              { label: '用1个故障位启用', value: 1 },
            ]}
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormSelect
            width="md"
            name="faultLevel"
            label="故障电平"
            options={[
              { label: '低电平', value: 0 },
              { label: '高电平', value: 1 },
            ]}
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormDigit
            width="md"
            colProps={{ md: 12, xl: 8 }}
            key="faultPos"
            name="faultPos"
            label="故障位的位置"
          />
        </ProFormGroup>

      </ModalForm>
    </div>
  );
};
const EncoderCommon = forwardRef<unknown, FormDialogProps>(Encodermodal);

export default EncoderCommon;
